<!-- 全部项目 -->
<template>
  <div>
    <!-- 功能区 开始 CRC和PM进来是加入项目-->
    <div class="table-operator">
      <a-form-model layout="inline">
        <a-form-model-item :label="$t('all.autotext992')">
          <a-input
            v-model="queryParam.no"
            :placeholder="$t('all.autotext992')"
            allowClear
            style="width:200px"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext1273')">
          <a-select
            style="width: 200px;"
            v-model="queryParam.sponsorId"
            show-search
            :filter-option="filterOption"
            :placeholder="$t('all.autotext679')"
            allowClear
          >
            <a-select-option v-for="list in phaseList" :key="list.id">
              {{ list.orgName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          :label="$t('all.autotext1253')"
          v-if="$store.getters.roles.length && $store.getters.roles[0].code === 'SYS_BIZ'"
        >
          <a-select
            style="width: 200px;"
            v-model="queryParam.pmAccount"
            show-search
            :filter-option="filterOption"
            :placeholder="$t('all.autotext1348')"
            allowClear
          >
            <a-select-option v-for="list in adminList" :key="list">
              {{ list }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="handleSearch">
            {{ $t('all.autotext30') }}
          </a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button @click="resetQuery">{{ $t('all.autotext340') }}</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-button
        type="primary"
        icon="plus"
        @click="actionAdd"
        v-if="$auth('PROJECT.PROJECT_ADD')"
      >
        {{ $t('all.autotext1385') }}
      </a-button>
      <!-- <a-button
        type="primary"
        icon="plus"
        @click="clickJoinProject"
        v-if="$isSystem()"
      >
        加入项目
      </a-button> -->
    </div>
    <!-- 表格开始 -->
    <s-table
      ref="table"
      size="default"
      :row-key="record => record.id"
      :columns="columns"
      :data="loadData"
      :scroll="{ x: 1300 }"
    >
      <span slot="createTime" slot-scope="text, record">{{ record.createTime | moment }}</span>
      <span slot="status" slot-scope="text, record">
        <template v-if="record.status == 1">{{ $t('all.autotext392') }}</template>
        <template v-if="record.status == 2">{{ $t('all.autotext1075') }}</template>
        <template v-if="record.status == 3">{{ $t('all.autotext892') }}</template>
      </span>
      <span slot="advancedPay" slot-scope="text, record">{{ renderAdvancedPay(record) }}</span>
      <template slot="id" slot-scope="text, record, index">
        {{ index | getPageIndex($refs.table) }}
      </template>
      <template slot="no" slot-scope="text, record">
        <div style="wordBreak: break-all">
          <img v-if="isNotFormalProject(record)" src="@assets/images/overview/test-item-icon.svg">
          {{ text }}
        </div>
      </template>
      <span slot="action" slot-scope="text, record">
        <template>
          <a-space>
            <!-- epv1.5 有详情菜单的权限就会有详情按钮的权限，反之也一样 -->
            <a-button
              v-if="$menuAuth('PROJECT')"
              @click="routeToProjectDetail(record)"
              type="link"
              class="link-btn"
            >{{ $t('all.autotext822') }}</a-button>
            <a-button
              v-if="isNotFormalProject(record) && ($auth('PROJECT.PROJECT_CONFIGURATION') || haveProjectConfigAuth(record))"
              @click="toConfig(record)"
              type="link"
              class="link-btn"
            >{{ $t('all.autotext1145') }}</a-button>
          </a-space>
        </template>
      </span>
    </s-table>
    <AddModal
      v-model="visible"
      :isEditProject="false"
      @modalOk="addSubmit"
      :isEdit="0"
      :editContent="{}"
    />
    <JoinProjectModal :joinProjectVisible="joinProjectVisible" @closeJoinProject="closeJoinProject" />
  </div>
</template>

<script>

import AddModal from './AddModal.vue'
import JoinProjectModal from './JoinProjectModal.vue'
import {
  getProjectList,
  getProjectAdd,
  proAdminList
} from '@/api/overview/contract'
import { getUnread } from '@/api/system/message'
import { getSponsorList } from '@api/system/user'
import storage from 'store'
import { CURRENT_PROID } from '@/store/mutation-types'

export default {
  components: {
    AddModal,
    JoinProjectModal
  },
  props: {
    // 全部没状态1啥也不是  2进行中 3关闭状态
    switchState: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      joinProjectVisible: false,
      // tab切换时，更改 queryParam 中的状态字段。
      queryParam: {
        no: '',
        sponsorId: '',
        pmAccount: ''
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getProjectList({ ...parameter, ...this.queryParam }).then(res => {
          this.$emit('sendMsg', res)
          return res.page
        })
      },
      // 表头
      columns: [
        {
          title: this.$t('all.autotext334'),
          width: '100px',
          dataIndex: 'id',
          scopedSlots: { customRender: 'id' }
        },
        {
          title: this.$t('all.autotext992'),
          width: '180px',
          dataIndex: 'no',
          scopedSlots: { customRender: 'no' }
        },
        // {
        //   title: this.$t('all.autotext873'),
        //   width: '150px',
        //   dataIndex: 'protocolNo'
        // },
        {
          title: this.$t('all.autotext211'),
          width: '250px',
          dataIndex: 'name'
        },
        {
          title: this.$t('all.autotext1273'),
          width: '150px',
          dataIndex: 'sponsorName'
        },
        // {
        //   title: this.$t('all.autotext21'),
        //   dataIndex: 'createTime',
        //   width: '150px',
        //   scopedSlots: { customRender: 'createTime' }
        // },
        // {
        //   title: this.$t('all.autotext1253'),
        //   width: '150px',
        //   dataIndex: 'pmAccount'
        // },
        {
          title: '是否垫付',
          dataIndex: 'advancedPay',
          width: '150px',
          scopedSlots: { customRender: 'advancedPay' }
        },
        {
          title: this.$t('all.autotext345'),
          dataIndex: 'status',
          width: '150px',
          scopedSlots: { customRender: 'status' }
        },
        // {
        //   title: this.$t('all.autotext480'),
        //   width: '150px',
        //   dataIndex: 'businessAccount'
        // },
        {
          title: '项目总预算',
          dataIndex: 'budget',
          width: '150px'
        },
        {
          title: '已支付金额',
          dataIndex: 'usedAmount',
          width: '150px'
        },
        {
          title: '待付金额',
          dataIndex: 'toPay',
          width: '150px'
        },
        {
          title: '可用金额',
          dataIndex: 'avBalance',
          width: '150px'
        },
        {
          title: this.$t('all.autotext187'),
          dataIndex: 'action',
          width: '170px',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      visible: false,
      phaseList: [],
      adminList: []
    }
  },
  watch: {
    switchState (newv) {
      if (newv === null || newv === 1 || newv === 2 || newv === 3) {
        this.queryParam.status = newv
        this.$refs.table.refresh(true)
      }
    }
  },
  created () {
    this.removeStorageProjectID()
    getUnread().then(res => {
      this.$globalVue.$emit('unReadMsgCount', res)
    })
  },
  mounted () {
    this.$store.commit('changeActiveKey', 0)
    this.getSponsorList()
    this.getProAdminList()
  },
  methods: {
    isNotFormalProject ({ classify }) {
      return classify !== 1
    },
    haveProjectConfigAuth ({ configuration }) {
      return configuration === true
    },
    removeStorageProjectID () {
      storage.remove(CURRENT_PROID)
    },
    // 加入项目对话框关闭
    closeJoinProject (val) {
      this.joinProjectVisible = false
      if (val) {
        this.$refs.table.refresh(true)
      }
    },
    // 点击加入项目
    clickJoinProject () {
      this.joinProjectVisible = true
    },
    // 路由跳转
    routeToProjectDetail (record) {
      // if (record.sync === false) {
      //   return this.$message.warning('当前环境项目暂未配置')
      // }
      this.$store.dispatch('EnterProject', record).then(res => {
        this.$router.push({ name: 'Responsible' })
      })
    },
    // 点击配置
    toConfig (record) {
      this.$store.dispatch('EnterProject', record).then(res => {
        this.$router.push({ name: 'Config' })
      })
    },
    // 点击新增弹框
    actionAdd () {
      this.visible = true
    },
    // 点击确认新增
    addSubmit (e) {
      getProjectAdd(e)
        .then(res => {
          this.visible = false
          this.$message.success(this.$t('all.autotext1243'))
          this.$refs.table.refresh(true)
        })
    },
    // 请求申办方列表
    getSponsorList () {
      getSponsorList({ code: 10001011 }).then(res => {
        this.phaseList = res
      })
    },
    async getProAdminList () {
      const res = await proAdminList()
      this.adminList = res
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    resetQuery () {
      this.queryParam = {
        ...this.queryParam,
        no: '',
        sponsorId: '',
        pmAccount: ''
      }
      this.$refs.table.refresh(1)
    },
    handleSearch () {
      this.$refs.table.refresh(1)
    },
    renderAdvancedPay (record) {
      if (record.advancedPay === 0) {
        return '否'
      } else if (record.advancedPay === 1) {
        return '是'
      } else {
        return '-'
      }
    }
  }
}
</script>
<style scoped lang="less">
.table-operator{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
